//获取图片和按钮
window.onload = function () {
    let left = document.querySelector('.left1')
    let right = document.querySelector('.right1')
    let img = document.querySelector('.cont-nav-right .nav-right .img ')
    let index = 0
    //获取小圆点
    let cicle = document.querySelectorAll('.cicle ul li')
    let cicle_index = 0
    right.onclick = function () {
        // alert('1')

        index++
        if (index === 4) {
            index = 0
        }
        img.style.left = -1100 * index + 'px'
        //每一次小圆点++
        cicle_index++
        if(cicle_index === 4){
            cicle_index = 0
        }
        //循环小圆点的数组
        for(let i = 0;i < cicle.length;i++){
            cicle[i].className = ''
        }
        cicle[cicle_index].className = 'first'
    }
    left.onclick = function (){
        index--
        if(index < 0){
            index = 3
        }
        img.style.left = -1100 * index + 'px'

        cicle_index--
        if(cicle_index < 0){
            cicle_index = 3
        }
        for(let i = 0;i < cicle.length; i++){
            cicle[i].className = ''
        }
        cicle[cicle_index].className = 'first'

    }
    let lbt = document.querySelector('.nav-right')
    lbt.onmouseover = function(){
        //鼠标移入显示内容
        left.style.display = 'block'
        right.style.display = 'block'
    }
    lbt.onmouseleave = function(){
        //鼠标移出隐藏内容
        left.style.display = 'none'
        right.style.display = 'none'
    }
}